
<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <!-- 卡片 -->
    <el-card>
      <el-button type="primary">添加分类</el-button>
      <tree-table :data="catList" :columns="columns" :selection-type="false" :expand-type="false" :show-index="true"
        index-text="#" border>
        <!-- 是否有效 -->
        <template slot="cat_deleted" scope="scope">
          <i class="el-icon-success" style="color: chartreuse;" v-show="!scope.row.cat_deleted"></i>
          <i class="el-icon-success"  v-show="scope.row.cat_deleted"></i>
      </template>
      <!-- 排序 -->
      <template slot="cat_level" scope="scope">
          <el-tag v-show="scope.row.cat_level == 0" size="mini">一级</el-tag>
          <el-tag type="success" size="mini" v-show="scope.row.cat_level == 1">二级</el-tag>
          <el-tag type="warning" size="mini" v-show="scope.row.cat_level == 2">三级</el-tag>
      </template>
      <template slot="delete" scope="scope">
        <el-button size="mini" type="primary" 
        icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      </tree-table>
    </el-card>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[2, 5, 8, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { cateGories } from '../http/categories/api'
export default {
  data() {
    return {
      catList: [],
      total:0,
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 3
      },
      columns: [
        {
          label: "商品分类名称",
          prop: "cat_name"
        },
        // 是否有效
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: 'template',
            template: 'cat_deleted',
        },
        // 排序
        {
          label: "排序",
          prop: "cat_level",
          type: 'template',
            template: 'cat_level',
        },
        // 删除
        {
          label:'删除',
          type: 'template',
            template: 'delete',

        }
      ]
    };
  },

  components: {},

  computed: {},

  mounted() { },

  created() {
    this.getCatAll()
  },
  methods: {
    async getCatAll() {
      const { data: res } = await cateGories(this.queryInfo)
      console.log(res);
      this.catList = res.data.result
      this.total = res.data.total
    },
    // 分页
    handleSizeChange(val) {
        this.queryInfo.pagesize = val
        this.getCatAll()
      },
      handleCurrentChange(val) {
        this.queryInfo.pagenum = val
        this.getCatAll()
      }
  },
  watch: {},
  mixins: []
}

</script>
<style  scoped>

</style>